<route lang="json5" type="pbRecord">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '财务管理 > 派币日志',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false,
    onReachBottomDistance:50,
  },

}
</route>

<script setup lang="ts">
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import dayjs from 'dayjs'
import { ref } from 'vue'
import orderDetail from '@/components/order-detail.vue'

const timmer = ref<any>([dayjs().startOf('year').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])
function handleConfirm() {

}
const query_sb_chked_rs = ref([])
const query_md_chked_rs = ref([])
const sbList = ref(['17800001', '17800002', '17800003', '17800004', '17800005', '17800006', '17800007', '17800001', '17800002', '17800003', '17800004', '17800005', '17800006', '17800007',
])

const storeList = ref(['上海和平路1', '上海和平路2', '上海和平路3', '上海和平路4', '上海和平路5', '上海和平路6', '上海和平路7'])

function handleChange({ value }) {
  console.log(value)
}
const dropMenu = ref()
const slider = ref() // slider 1.2.25支持
function confirm() {
  dropMenu.value.close()
}

function handleOpened() {
  slider.value?.initSlider()
}
const dataList = ref([]) // 列表数据
const total = ref(50) // 总条数
const loadState = ref<LoadMoreState>('loading') // 加载状态
function loadMore() {
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}

onReachBottom(() => {
  // 触底加载更多数据
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})

onLoad(() => {
  // 初始化加载数据
  loadMore()
})

const orderDetailRef = ref()
</script>

<template>
  <view class="wot-list-top-wrap">
    <view class="tag-list">
      <view class="flex items-center pb-8rpx">
        <wd-icon name="time-filled" size="18px" color="#2A90FF" />
        &nbsp;按时间查询
      </view>
      <wd-calendar v-model="timmer" custom-value-class="calendar" class="flex-1" type="daterange" @confirm="handleConfirm" />
    </view>

    <view class="center-box wot-box">
      <wd-drop-menu class="drop-menu">
        <wd-drop-menu-item ref="dropMenu" title="按: 设备编号" @opened="handleOpened">
          <view class="drop-content">
            <view class="drop-label">
              设备编号（筛选）：
            </view>
            <view class="sb-type">
              <wd-checkbox-group v-model="query_sb_chked_rs" inline>
                <wd-checkbox v-for="(item, index) in sbList" :key="item" :model-value="item">
                  <span class="sb-num">{{ item }}</span>
                  <span v-if="index === 1" class="modify-num">{{ index === 1 ? item : '' }}</span>
                </wd-checkbox>
              </wd-checkbox-group>
            </view>
          </view>
        </wd-drop-menu-item>
        <wd-drop-menu-item ref="dropMenu" title="按: 门店 / 标签" @opened="handleOpened">
          <view class="drop-content">
            <view class="drop-label">
              门店（筛选）：
            </view>
            <view class="sb-type">
              <wd-checkbox-group v-model="query_md_chked_rs" inline>
                <wd-checkbox v-for="item in storeList" :key="item" :model-value="item">
                  <span class="checkbox-label">{{ item }}</span>
                </wd-checkbox>
              </wd-checkbox-group>
            </view>
            <view class="drop-label">
              标签（筛选）：
            </view>
            <view class="sb-type">
              <wd-checkbox-group v-model="query_md_chked_rs" inline>
                <wd-checkbox v-for="item in storeList" :key="item" :model-value="item">
                  <span class="checkbox-label">{{ item }}</span>
                </wd-checkbox>
              </wd-checkbox-group>
            </view>
            <view class="mt-20rpx text-24rpx text-#FAAB0C">
              <span class="text-bold"> 说明：</span><br>
              选择则：按指条件查询，不选择则：查询所有<br>
              如未添加标签、门店，则直接查询
            </view>
          </view>
        </wd-drop-menu-item>
      </wd-drop-menu>
      <view class="btn-box">
        <wd-button type="primary" size="small" block custom-class="primary-button">
          筛选查询
        </wd-button>
      </view>
    </view>
    <view class="center-box wot-box total">
      <view>
        派币总数：<wd-tag bg-color="#07c160">
          300
        </wd-tag>
      </view>
      <view>
        派币次数：<wd-tag bg-color="#ffc107">
          300
        </wd-tag>
      </view>
    </view>
    <view class="wot-row wot-title bg-#e8f3ff">
      <wd-row>
        <wd-col :span="6">
          <view class="wot-item">
            设备编号
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            数量
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            状态
          </view>
        </wd-col>
        <wd-col :span="10">
          <view class="wot-item">
            时间
          </view>
        </wd-col>
      </wd-row>
    </view>
  </view>
  <view class="wot-list pb-safe">
    <view v-for="(item, index) in dataList" :key="index" class="wot-row">
      <wd-row>
        <wd-col :span="6">
          <view class="wot-item">
            <wd-tag bg-color="#7232dd">
              1790005{{ item }}
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            10
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            <wd-tag bg-color="#07c160">
              成功
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="10">
          <view class="wot-item blue">
            2025/08/28 10:48:32
          </view>
        </wd-col>
      </wd-row>
    </view>
    <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
    <orderDetail ref="orderDetailRef" />
  </view>
</template>

<style scoped lang="scss">
.tag-list {
  padding-left: 40rpx;
  padding-right: 10rpx;
  background-color: #ffffff;
  /* margin: 10rpx; 直接涉及到外部边框不要用margin */
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  color: #2A90FF;
}

.center-box {
  padding: 0 20rpx;
  background-color: #ffffff;
  padding-bottom: 20rpx;
  color: $uni-text-primary;
  .drop-content{
    padding: 20rpx 40rpx 40rpx;
    .sb-type{
      border-bottom: 1rpx solid #e2e2e2;
      padding-bottom: 20rpx;
    }
    .drop-label{
      padding: 20rpx 0;
      font-size: 28rpx;
      font-weight: bold;
      color: $uni-text-title;
    }
    .checkbox-label{
      color: $uni-text-primary;
      font-size: 24rpx;
    }
    .base-num {
      padding: 0 6rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
    }
    .sb-num{
      @extend .base-num;
      background-color: #7232dd;
      color: #fff;

    }
    .modify-num {
      @extend .base-num;
      color:#c8c9cc;
      margin-left: 10rpx;
      border: 1rpx solid #c8c9cc;
    }
  }
  .btn-box {
    padding: 0 50rpx;
  }
}

.statistics {
  display: flex;
  justify-content: space-around;

  .s-col {
    width: 40%;

    .s-item {
      display: flex;
      padding-bottom: 5px;

      .s-label {
        width: 170rpx;
        text-align: right;
      }

      .num {
        background-color: $uni-color-orange;
        color: #fff;
        border-radius: 4rpx;
        padding: 0 4rpx;
        margin-right: 6rpx;
      }
    }

  }
}
.tips {
  font-size: 24rpx;
  color: #646566;
  padding: 7px 14px;
  .i-link {
    display: inline;
  }
}
.wot-item {
  text-align: center;
  padding-left: 12rpx;

}
.blue {
    color: #2A90FF;
  }
  .total {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;
  }
</style>
